iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 24
0
自我挑戰組

自我挑戰日記系列 第 24

CSS:裁切圖片

  • 分享至 

  • xImage
  •  

大家好 /images/emoticon/emoticon37.gif

今天用這張圖像作裁切
裁切大小還可以再移動要隱藏的部分
https://ithelp.ithome.com.tw/upload/images/20171229/20107496vXRpqUeJCX.jpg


先設定要看到的圖像尺寸
再用 overflow 屬性,隱藏超出的部分
margin 移動 img 位置

.box{
    width: 300px;
    height: 300px;
    overflow: hidden;
    background: #f80;
}

設定要裁切的原圖尺寸和移動位置
用 width 或 height 其中一邊設定圖像尺寸,比例不變
margin 移動要隱藏的部分

.box img{
    height: 500px;
    margin-left: -195px;
}

https://ithelp.ithome.com.tw/upload/images/20171229/20107496lj4am3L6UB.jpg

若 width 和 height 都設定尺寸,比例就不會和原圖一樣

.box img{
    width: 500px;
    height: 500px;
    margin-top: -50px;
    margin-left: -195px;
}

https://ithelp.ithome.com.tw/upload/images/20171229/20107496U9OD4m36s3.jpg


.box{
    width: 300px;
    height: 300px;
    background: #f80;
}

上面的屬性只是要方便看到裁切的尺寸
可以不用
裁切只需要下面的屬性

.box img{ 
    width: 300px;
    height: 300px;
    position:absolute;
    clip:rect(10px,290px,290px,10px);
}

clip:rect() 預設左上為起點
position 固定裁切的位置
值:上、右、下、左
上、下的起點是上方為 0
右、左的起點是左邊為 0
https://ithelp.ithome.com.tw/upload/images/20171229/201074962KrtJinU3z.jpg


.box img{
    width: 300px;
    height: 300px;
    background: #f80;
    border-radius:50%;
    object-fit: cover;
}

https://ithelp.ithome.com.tw/upload/images/20171229/20107496AUnxVqPnGd.jpg
這個裁切只需要 object-fit 就以裁切
object-fit 屬性有5個值
每個屬性值的具體含義如下:
none :原始尺寸
fill :預設值,填滿 box 不保持原比例
contain :保持原比例,會看到完整的圖像,長寬不足留空
cover :保持原比例,會看到部分圖像,其餘隱藏
scale-down :中文釋義“降低”。就好像依次設置了none或contain ,最終呈現的是尺寸比較小的那個。

--- 明日待續。


上一篇
CSS:卡片翻面
下一篇
CSS:background-blend-mode 背景混合模式
系列文
自我挑戰日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言